<template>
  <view>
    <!-- 页面标题 -->
    <view class="smart-page-head">
      <view class="smart-page-head-title">input,输入框</view>
    </view>
    
    <!-- 内容容器（带内边距） -->
    <view class="smart-padding-wrap">
      <!-- 1. 自动获取焦点 -->
      <view class="item">可自动获取焦点的</view>
      <view><input class="smart-input" focus="true" placeholder="自动获取焦点" /></view>

      <!-- 2. 右下角显示搜索 -->
      <view class="item">右下角显示搜索</view>
      <view><input class="smart-input" confirm-type="search" placeholder="右下角显示搜索" /></view>

      <!-- 3. 控制最大输入长度 -->
      <view class="item">控制最大输入长度</view>
      <view><input class="smart-input" maxlength="10" placeholder="控制最大输入长度为10" /></view>

      <!-- 4. 同步获取输入值 -->
      <view class="item">
        同步获取输入值
        <text style="color: #007AFF;">{{ inputValue }}</text>
      </view>
      <view><input class="smart-input" @input="onKeyInput" placeholder="同步获取输入值" /></view>

      <!-- 5. 数字输入 -->
      <view class="item">数字输入</view>
      <view><input class="smart-input" type="number" placeholder="这是一个数字输入框" /></view>

      <!-- 6. 密码输入（修复password属性） -->
      <view class="item">密码输入</view>
      <view><input class="smart-input" type="text" password="true" placeholder="这是一个密码输入框" /></view>

      <!-- 7. 带小数点输入（修复标签和文字） -->
      <view class="item">带小数点输入</view>
      <view><input class="smart-input" type="digit" placeholder="这是一个带小数点输入框" /></view>

      <!-- 8. 身份证输入（修复标签嵌套） -->
      <view class="item">身份证输入</view>
      <view><input class="smart-input" type="idcard" placeholder="这是一个身份证输入框" /></view>

      <!-- 9. 带清除按钮（修复样式类和逻辑） -->
      <view class="item">带清除按钮</view>
      <view class="wrapper">
        <input 
          class="smart-input" 
          :value="clearinputValue" 
          @input="clearInput" 
          placeholder="这是一个带清除按钮输入框" 
        />
        <text v-if="showClearIcon" @click="clearIcon" class="uni-icon">&#xe434;</text>
      </view>

      <!-- 10. 可查看密码的输入框（修复class语法和引号） -->
      <view class="item">可查看密码的输入框</view>
      <view class="wrapper">
        <input 
          class="smart-input" 
          placeholder="请输入密码" 
          :password="showPassword" 
        />
        <text 
          class="uni-icon" 
          :class="!showPassword ? 'eye-active' : ''" 
          @click="changePassword"
        >&#xe568;</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',          // 同步输入值
      showPassword: true,      // 密码显示/隐藏控制
      clearinputValue: '',     // 带清除按钮的输入值
      showClearIcon: false     // 清除按钮显示控制（修复变量名大小写）
    };
  },
  methods: {
    // 同步获取输入值
    onKeyInput(event) {
      this.inputValue = event.detail.value; // 修复代码格式（移到花括号内）
    },
    // 清除按钮：输入时控制按钮显示
    clearInput(event) {
      this.clearinputValue = event.detail.value;
      // 输入内容长度>0时显示清除按钮，否则隐藏
      this.showClearIcon = event.detail.value.length > 0;
    },
    // 点击清除按钮，清空输入
    clearIcon() { // 修复方法名（原clearIcon多了空格）
      this.clearinputValue = '';
      this.showClearIcon = false;
    },
    // 切换密码显示/隐藏
    changePassword() {
      this.showPassword = !this.showPassword;
    }
  }
};
</script>

<style scoped>
/* 每个输入项的间距 */
.item {
  margin-bottom: 40rpx;
  font-size: 24rpx;
  color: #333;
}

/* 输入框样式（补充基础样式，避免显示错乱） */
.smart-input {
  width: 100%;
  height: 70rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  font-size: 24rpx;
}

/* 带清除按钮/查看密码的容器（flex布局，让图标靠右） */
.wrapper {
  position: relative; /* 相对定位，用于绝对定位图标 */
}

/* 清除按钮/眼睛图标的样式 */
.uni-icon {
  position: absolute;
  right: 25rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 32rpx;
  cursor: pointer;
}

/* 眼睛图标激活状态（可选，可自定义颜色） */
.eye-active {
  color: #007AFF;
}
</style>